<template>
<div class="customsDeclarationBoxVue">



  <div class="head">

    <div class="btns clearfix">
      <!-- <el-button class="export" :disabled="!editable" type="primary">导出</el-button> -->
    </div>


    <div class="tcf-table">
      <div class="tcf-table-in">
        <el-row>
          <el-col :span="24">
            <div>
              <p>TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
              <p>NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE</p>
              <p>TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA</p>
              <p>TEL:+86-10-50911288</p>
              <p>PACKING LIST</p>
            </div>
          </el-col>
        </el-row>
        <el-row class="-from">
          <el-col :span="4" class="-to01">
            <p>TO:</p>
          </el-col>
          <el-col :span="8">
            <div class="bill-of-lading-project-requires -bill-of-lading-project-requires -to02">
              <ul>
                <li>
                  <el-row>
                    <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdb_toName" placeholder="请输入买方地址"></el-input>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdb_toAdd"  placeholder="请输入买方地址"></el-input>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdb_toTel" placeholder="请输入买方电话"></el-input>
                  </el-row>
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="4" class="-to03"></el-col>
          <el-col :span="8" class="-el-col -to04">
            <div class="bill-of-lading-project-requires -bill-of-lading-project-requires">
              <ul>
                <li>
                  <el-row>
                    <el-col :span="12" style="text-align:left;">
                      <p>Invoice No.:</p>
                    </el-col>
                    <el-col :span="12">
                      <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdb_invoiceNO"  placeholder="请输入内容"></el-input>
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-col :span="12" style="text-align:left;">
                      <p>Invoice Date:</p>
                    </el-col>
                    <el-col :span="12">
                      <el-date-picker value-format="yyyy-MM-dd" :disabled="!editable" @change="mustUpdate2"   type="date" v-model="documentprocess_cc_cdb_invoiceDate" ></el-date-picker>
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row class="-from">
          <el-col :span="24">
            <el-row>
              <el-col :span="4">
                <p>From:</p>
              </el-col>
              <el-col :span="8">
                <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdb_fromPort" placeholder="请输入内容" ></el-input>
              </el-col>
              <el-col :span="4"> </el-col>
              <el-col :span="8">
                <p style="text-align:left">Terms of Payment:</p>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <p>To:</p>
              </el-col>
              <el-col :span="8">
                <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdb_toPort" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="4"> </el-col>
              <el-col :span="8">
                <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdb_payTerms" placeholder="请输入内容"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <p>Shipment Date:</p>
              </el-col>
              <el-col :span="8">
                <el-date-picker class="shipment-picker" value-format="yyyy-MM-dd" format="yyyy/MM" @change="mustUpdate2"  :disabled="!editable"   type="date" v-model="documentprocess_cc_cdb_shipDate"  ></el-date-picker>
              </el-col>
              <el-col :span="4"> </el-col>
              <el-col :span="8">
                <p style="text-align:left">Trade Term</p>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <p>By:</p>
              </el-col>
              <el-col :span="8">
                <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdb_transport" placeholder="请输入内容" ></el-input>
              </el-col>
              <el-col :span="4"> </el-col>
              <el-col :span="8">
                <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdb_tradeTerms" placeholder="请输入内容"></el-input>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-table :data="tableData" border style="width: 100%" :span-method="arraySpanMethod">
            <el-table-column type="index" label="Item" :index="indexMethod"></el-table-column>
          <el-table-column prop="documentprocess_cc_cdb_products" label="Description of Goods">
            <template slot-scope="scope">
                        <el-input :readonly="!editable"   v-model="scope.row.documentprocess_cc_cdb_products" ></el-input>
                    </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_cdb_description" label="Specification&Model">
            <template slot-scope="scope">
                        <el-input :readonly="!editable"   v-model="scope.row.documentprocess_cc_cdb_description" ></el-input>
                    </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_cdb_quantity" label="Quantity(PCS)">
            <template slot-scope="scope">
                <el-input-number  :min="0" :disabled="!editable" :controls="false" @change="handleInputChange" v-model="scope.row.documentprocess_cc_cdb_quantity" ></el-input-number>
            </template>
          </el-table-column>

            <el-table-column prop="documentprocess_cc_cdb_packagenumber" label="PackageNumber">
            <template slot-scope="scope">
                        <el-input-number  :min="0" :disabled="!editable"  :step="0.1" :controls="false" @change="handleInputChange" v-model="scope.row.documentprocess_cc_cdb_packagenumber" ></el-input-number>
                <!-- <input type="number"  :min="0" :disabled="!editable"  @input="handleInputChange" v-model="scope.row.documentprocess_cc_cdb_packagenumber" /> -->
            </template>
          </el-table-column>

         <!-- <el-table-column prop="documentprocess_cc_cdb_cartons" label="CARTONS NO">
            <template slot-scope="scope">
                        <el-input-number  :min="0" :disabled="!editable" :controls="false" @change="handleInputChange" v-model="scope.row.documentprocess_cc_cdb_cartons" ></el-input-number>
                    </template>
          </el-table-column> -->

          <el-table-column prop="documentprocess_cc_cdb_netWeight" label="Net WeightNet(KGS)">
            <template slot-scope="scope">
                        <el-input-number  :min="0" :disabled="!editable"  :precision="2"  :step="0.1" :controls="false" @change="handleInputChange" v-model="scope.row.documentprocess_cc_cdb_netWeight" ></el-input-number>
                        <!-- <input  type="number" :min="0" :disabled="!editable"  @input="handleInputChange" v-model="scope.row.documentprocess_cc_cdb_netWeight" /> -->
                    </template>
          </el-table-column>

          <el-table-column prop="documentprocess_cc_cdb_grossWeight" label="Gross WeightNet(KGS)">
            <template slot-scope="scope">
                        <!-- <input type="number" :min="0" :disabled="!editable"  @input="handleInputChange" v-model="scope.row.documentprocess_cc_cdb_grossWeight" /> -->
                        <el-input-number  :min="0" :disabled="!editable"  :step="0.1" :controls="false" @change="handleInputChange" v-model="scope.row.documentprocess_cc_cdb_grossWeight" ></el-input-number>
                    </template>
          </el-table-column>

          <el-table-column prop="documentprocess_cc_cdb_measurement" label="Measurement(CM)">
            <template slot-scope="scope">
                        <el-input-number  :min="0" :disabled="!editable"   :step="0.1" :controls="false" @change="handleInputChange" v-model="scope.row.documentprocess_cc_cdb_measurement" ></el-input-number>
                        <!-- <input :min="0" type="number" :disabled="!editable"  @input="handleInputChange" v-model="scope.row.documentprocess_cc_cdb_measurement" /> -->
                    </template>
          </el-table-column>

          <el-table-column
          v-if="editable"
          label="操作"
          width="100">
          <template slot-scope="scope" >
            <el-button @click="addNewLine(scope.$index, data.documentprocess_cc_cdb_table)" type="text" size="small">添加</el-button>
            <el-button @click="removeCurrentLine(scope.$index, data.documentprocess_cc_cdb_table)" type="text" size="small">移除</el-button>
          </template>
        </el-table-column>

        </el-table>

        <el-row class="-footer">
          <el-col :span="24" class="-footer">
            <div>
              <div class="-footer-top">
                Origin of China
              </div>
              <div>
                <span>TOTAL PACKAGES:  </span>
                <el-input :readonly="!editable"  v-model="totalCartons" placeholder="请输入内容" class="-footer-top-input"></el-input>
                <el-input :readonly="!editable"  v-model="data.documentprocess_cc_cdb_totalCartonsUnit" placeholder="请输入内容" class="-footer-top-input"></el-input>

                <!-- <span>PKGS</span> -->
              </div>
              <div>
                <span>TOTAL NET WEIGHT: </span>
                <span>{{totalNetWeight}}</span>
                <span> KGS</span>
              </div>
              <div>
                <span>TOTAL GROSS WEIGHT: </span>
                <span>{{totalGrossWeight}}</span>
                <span> KGS</span>
              </div>
              <div>
                <span>TOTAL VOLUME: </span>
                <span>{{totalVolume}}</span>
                <span> CBM</span>
              </div>
              <div>
                <span>Marks and Numbers:</span>
                <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdb_marks" placeholder="请输入内容" class="-footer-top-input"></el-input>
              </div>
              <!-- <div>
                <span>Marks of HATS:</span>
                <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdb_shipMarks" placeholder="请输入内容" class="-footer-top-input"></el-input>
              </div> -->
              <p class="-footer-bottom">TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
            </div>
          </el-col>
        </el-row>
      </div>

    </div>



    <div class="upload">
      <p class="upload-hint">票据/附件</p>
      <div>
        <div class="upload-btn">
          <input type="file"  v-show="editable"  name="file" multiple @change="selectFiles" >
          <el-button :disabled="!editable" type="primary">选择附件</el-button>
        </div>
        <ul class="upload-files">
          <li @mouseover="handleOver(item)"   @mouseout="handleOut(item)" v-for="(item,index) in data.attachedFiles" :key="index">
            <span @click="download(item.id, $event)">{{item.name}}</span>
            <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
            <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
          </li>
        </ul>
      </div>
    </div>


  </div>




</div>
</template>

<script>
import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload , deleteFile} from '@/server/customermanagement/index.js'
import {toFixed} from '@/util/transform.js';

export default {
  created() {
    this.documentprocess_cc_cdb_invoiceDate = this.data.documentprocess_cc_cdb_invoiceDate;
    this.documentprocess_cc_cdb_shipDate = this.data.documentprocess_cc_cdb_shipDate;

    this.data.documentprocess_cc_cdb_totalCartonsUnit = this.data.documentprocess_cc_cdb_totalCartonsUnit || 'PKGS';
  },
  mounted(){
    let _this = this;
    this.bus.$on('bind-new-ftc', function(ftcData){
      //关联绑定的外贸合同

      _this.data.documentprocess_cc_cdb_toName = ftcData.bf_buy_name;
      _this.data.documentprocess_cc_cdb_toAdd = ftcData.bf_buy_address;
      _this.data.documentprocess_cc_cdb_toTel = ftcData.bf_buy_tel;
      _this.data.documentprocess_cc_cdb_invoiceNO = ftcData.bf_orderNumber;
      
      _this.data.documentprocess_cc_cdb_marks = ftcData.bf_shippingMarks;

      _this.data.documentprocess_cc_cdb_fromPort = ftcData.bf_portOfLoad;
      _this.data.documentprocess_cc_cdb_toPort = ftcData.bf_portOfDestination;
      _this.data.documentprocess_cc_cdb_transport = ftcData.bf_shipment;
      _this.data.documentprocess_cc_cdb_tradeTerms = ftcData.bf_tradeTerm;
      _this.data.documentprocess_cc_cdb_shipMarks = ftcData.bf_shippingMarks;


      // for (let i = 0; i < this.data.documentprocess_cc_cdb_table.length - 1; i++) {
      for (let i = 0; i < ftcData.bf_table1.length - 1; i++) {
        if (!_this.data.documentprocess_cc_cdb_table[i]){
          _this.data.documentprocess_cc_cdb_table.push({});
        }

        (_this.data.documentprocess_cc_cdb_table[i]).documentprocess_cc_cdb_products = (ftcData.bf_table1[i]).bf_table1_product;
        (_this.data.documentprocess_cc_cdb_table[i]).documentprocess_cc_cdb_description = (ftcData.bf_table1[i]).bf_table1_description;
        (_this.data.documentprocess_cc_cdb_table[i]).documentprocess_cc_cdb_quantity = (ftcData.bf_table1[i]).bf_table1_quantity;
      }
      _this.data.documentprocess_cc_cdb_table.splice(ftcData.bf_table1.length);

      _this.$forceUpdate();
    });

  },
  updated() {
    if (this.clickTimes === 1 && this.relation) {

      this.data.documentprocess_cc_cdb_totalCartonsUnit = this.data.documentprocess_cc_cdb_totalCartonsUnit || 'PKGS';

      let flag = this.data.modifyTime ? true : false;

      let innerFlag = this.data.documentprocess_cc_cdb_table.findIndex(item => {
        return  item.modifyTime != null;
      }) == -1 ? false : true;

      flag  = flag || innerFlag;

      if (!flag) {
        //第一次关联货运委托书
        this.data.documentprocess_cc_cdb_shipDate = this.relatedData.documentprocess_cc_lod_shipDate;
        this.documentprocess_cc_cdb_shipDate = this.data.documentprocess_cc_cdb_shipDate;
      }
      
      this.clickTimes = 2;
    }

    this.updateTableData();
    
  },
  computed: {
    //   表格计算总金额
    tableData() {
      let current = this.data.documentprocess_cc_cdb_table;
      let quantitys = 0,
        netWeights = 0,
        grossWeights = 0,
        measurements = 0,
        packages = 0;
      let lines = current.length;

      for (let i = 0; i < lines - 1; i++) {


        current[i].documentprocess_cc_cdb_quantity = parseInt(current[i].documentprocess_cc_cdb_quantity);
        current[i].documentprocess_cc_cdb_netWeight = toFixed(current[i].documentprocess_cc_cdb_netWeight, 2);
        current[i].documentprocess_cc_cdb_grossWeight = toFixed(current[i].documentprocess_cc_cdb_grossWeight, 2);
        current[i].documentprocess_cc_cdb_measurement = toFixed(current[i].documentprocess_cc_cdb_measurement, 2);
        current[i].documentprocess_cc_cdb_packagenumber = toFixed(current[i].documentprocess_cc_cdb_packagenumber, 2);

        quantitys += Number(current[i].documentprocess_cc_cdb_quantity);
        netWeights += Number(current[i].documentprocess_cc_cdb_netWeight);
        grossWeights += Number(current[i].documentprocess_cc_cdb_grossWeight);
        measurements += Number(current[i].documentprocess_cc_cdb_measurement);
        packages += Number(current[i].documentprocess_cc_cdb_packagenumber);

      }


      current[lines - 1].documentprocess_cc_cdb_quantity = quantitys;
      current[lines - 1].documentprocess_cc_cdb_netWeight = toFixed(netWeights,2);
      current[lines - 1].documentprocess_cc_cdb_grossWeight = toFixed(grossWeights, 2);
      current[lines - 1].documentprocess_cc_cdb_measurement = toFixed(measurements, 2);
      current[lines - 1].documentprocess_cc_cdb_packagenumber = toFixed(packages, 2);

      this.data.documentprocess_cc_cdb_totalCartons =current[lines - 1].documentprocess_cc_cdb_packagenumber; 

      return current;
    },

  },
  methods: {
    //   合并单元格
    arraySpanMethod(row) {
      let lines = this.data.documentprocess_cc_cdb_table.length;

      if (row.rowIndex === lines - 1) {
        if (row.columnIndex === 0) {
          return [1, 3];
        } else if (row.columnIndex === 1 || row.columnIndex === 2) {
          return [0, 0];
        }
      }
    },
    specialInitialProcess() {
      let dom = document.querySelector('.initiatingprocess .routers-ctrl');
      if (dom) {
        dom.style.zIndex = '0';
      }
    },
    mustUpdate(){
      this.$forceUpdate();
    },
    mustUpdate2(){
      this.data.documentprocess_cc_cdb_invoiceDate =  this.documentprocess_cc_cdb_invoiceDate.toString();
      this.data.documentprocess_cc_cdb_shipDate =  this.documentprocess_cc_cdb_shipDate.toString();
      this.$forceUpdate();
    },
    indexMethod(value) {
        let lines = this.data.documentprocess_cc_cdb_table.length;
      if (value === lines - 1) {
        return 'Total';
      }
      return value + 1;
    },
    selectFiles(event){
      //票据附件
      let _this = this;


      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          _this.data.attachedFiles.push({name: event.target.files[i].name, status: 1, id: res.data.datas[0].id});
        });

        _this.$forceUpdate();
      });
    },

    changeFiles(index,item) {
      deleteFile({'id':item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.data.attachedFiles.splice(index, 1);
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);
    },


    addNewLine(currentIndex, table){
      let newLine = _.cloneDeep(table[currentIndex]);

      // for (let prop in newLine) {
      //   newLine[prop] = '';
      // }
     
      _.unset(newLine, 'id');
      _.unset(newLine, 'createTime');
      _.unset(newLine, 'formInstId');
      _.unset(newLine, 'cdbId');
      _.unset(newLine, 'modifyTime');

      table.splice(currentIndex + 1, 0, newLine);
      this.handleInputChange();
    },
    removeCurrentLine(currentIndex, table){
      if (table.length > 2){
        table.splice(currentIndex, 1);
      }
      this.handleInputChange();
    },
    handleInputChange(){
      this.updateTableData();
      this.$forceUpdate();
    },
    updateTableData(){
      let current = this.data.documentprocess_cc_cdb_table;
      let quantitys = 0,
        netWeights = 0,
        grossWeights = 0,
        measurements = 0,
        packages = 0;
        
      let lines = current.length;

      for (let i = 0; i < lines - 1; i++) {

        current[i].documentprocess_cc_cdb_quantity = parseInt(current[i].documentprocess_cc_cdb_quantity);
        current[i].documentprocess_cc_cdb_netWeight = toFixed(current[i].documentprocess_cc_cdb_netWeight, 2);
        current[i].documentprocess_cc_cdb_grossWeight = toFixed(current[i].documentprocess_cc_cdb_grossWeight, 2);
        current[i].documentprocess_cc_cdb_measurement = toFixed(current[i].documentprocess_cc_cdb_measurement, 2);
        current[i].documentprocess_cc_cdb_packagenumber = toFixed(current[i].documentprocess_cc_cdb_packagenumber, 2);

        quantitys += Number(current[i].documentprocess_cc_cdb_quantity);
        netWeights += Number(current[i].documentprocess_cc_cdb_netWeight);
        grossWeights += Number(current[i].documentprocess_cc_cdb_grossWeight);
        measurements += Number(current[i].documentprocess_cc_cdb_measurement);
        packages +=  Number(current[i].documentprocess_cc_cdb_packagenumber);

      }


      current[lines - 1].documentprocess_cc_cdb_quantity = quantitys;
      current[lines - 1].documentprocess_cc_cdb_netWeight = toFixed(netWeights, 2);
      current[lines - 1].documentprocess_cc_cdb_grossWeight = toFixed(grossWeights, 2);
      current[lines - 1].documentprocess_cc_cdb_measurement = toFixed(measurements,2);
      current[lines - 1].documentprocess_cc_cdb_packagenumber = toFixed(packages,2);

      this.totalCartons = current[lines - 1].documentprocess_cc_cdb_packagenumber ;
      this.data.documentprocess_cc_cdb_totalCartons =current[lines - 1].documentprocess_cc_cdb_packagenumber ;


      this.totalNetWeight = toFixed(netWeights,2);
      this.data.documentprocess_cc_cdb_totalNetWeight = this.totalNetWeight;

      this.totalGrossWeight = toFixed(grossWeights,2);
      this.data.documentprocess_cc_cdb_totalGrossWeight = toFixed(grossWeights,2);

      this.totalVolume  = toFixed(measurements,2);
      this.data.documentprocess_cc_cdb_totalVolume = toFixed(measurements,2);

    },
  },
  data() {
    return {
      clickTimes: 0,
      totalVolume: 0,
      totalNetWeight: 0,
      totalGrossWeight: 0,
      totalCartons: 0,
      documentprocess_cc_cdb_invoiceDate: '',
      documentprocess_cc_cdb_shipDate: '',
    }
  },
  props: {
    data: {
      type: Object,
      required: true,
    },
    relatedData:{
      type: Object,
      required: true,
    },
    relation: {
      type: Boolean,
      required: true
    },
    editable: {
      type: Boolean,
      required:true
    },
    bus: {
      type: Object,
      required: true
    }
  },
  components: {}
}
</script>

<style lang="scss" >
.customsDeclarationBoxVue {

    padding: 20px;
    border: 1px solid #999;

    font-size: 15px;
    line-height: 30px;

    p {
      padding: 5px 0;

      span {
        font-weight: bolder;
      }
    }

    > h2 {
        text-align: center;
    }

    a {
        color: #409EFF;
    }
    .el-table {
        margin-bottom: 20px;
    }


          .el-input-number__decrease,
          .el-input-number__increase {
            width: 20px;

            border: none !important;
            background: transparent;
          }

          .el-input-number {
              width: 80px;
              min-width: 80px;
          }

    .head {
        .btns {
            width: 100%;
            height: 40px;
            text-align: center;
            .bind {
                float: left;
            }
            .export {
                float: right;
            }
        }

        .tcf-table {
            margin-top: 20px;
            padding: 20px;
            box-sizing: border-box;
            h2 {
                text-align: center;
                padding: 10px 0;
            }


            .shipment-picker {
              left: -60px;
            }

            td {
                border: 1px solid #e6ebf5;
            }
            
            input {
              border: none;
              outline: none;
              background-color: transparent;
              height: 100%;
            }

            .el-input__inner {
                border: none;
                background: transparent;
                padding: 0px;
            }

            .el-date-editor {
              .el-input__inner {
                padding-left: 30px;
              }
            }

            .tcf-table-title {
                text-align: center;
            }
            .tcf-table-in {
                border-top: 1px solid #999;
                .el-row {
                    box-sizing: border-box;
                    border-bottom: 1px solid #999;
                    border-left: 1px solid #999;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border-right: 1px solid #999;
                    padding: 5px;
                }
            }
            .-to01,
            .-to03,
            .-to04 {
                height: 133px;
            }
            .-to04 {
                border-right: 1px solid #999 !important;
            }
            .-to02 {
                ul {
                    li {
                        margin-bottom: 1px;
                    }
                }
            }
            .-from {
                .el-col-24 {
                    padding: 0;
                    .el-row {
                        border: none;
                    }
                }
                .el-col-4,
                .el-col-8 {
                    border-right: none;
                }
            }
            .-footer {
                width: 100%;
                text-align: left !important;
                border: none !important;
                .-footer-top {
                    text-align: right !important;
                    p {
                        display: inline-block !important;
                    }

                }
                .-footer-bottom {
                    text-align: center;
                }
            }
            .-footer-top-input {
                width: 100px !important;
            }
            .el-table {
                margin-top: 20px;
            }
            .el-select {
                width: 100%;
            }
            .-el-col {
                padding: 0 !important;
            }
            .bill-of-lading-project-requires-p {
                height: 392px;
            }
            .special-provisions {
                height: 351px;
            }
            .bill-of-lading-project-requires {
                width: 100%;
                border-bottom: 1px solid #999;
                box-sizing: border-box;
                .el-row {
                    box-sizing: border-box;
                    border: none;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border: none;
                }
                .el-col-20 {
                    text-align: left;
                    text-indent: 20px;
                }
                .-el-col {
                    padding: 5px !important;
                    text-indent: 0;
                }
            }
            .-bill-of-lading-project-requires {
                border-bottom: none;
            }
            .sea-freight {
                .el-col {
                    text-align: center;
                    height: 90px;
                    line-height: 90px;
                    box-sizing: border-box;
                }
                .sea-freight-col {
                    line-height: 41px;
                    padding-top: 3px;
                }
            }
            .no-border {
                //   border: none !important;
            }

            .special-row {
                .el-col {
                    height: 25px;
                    line-height: 25px;
                }
            }

        }

        .upload {
          >div {
            border: 1px solid #999;
            padding: 20px 0px 40px 20px;
          }

          .upload-btn {
            position: relative;
            >input {
              opacity: 0;
              width: 100px;
              height: 40px;
              position: absolute;
              top: 0;
              left: 0;
            }
          }

          .upload-files {

              > li {
                  width: 300px;
                  padding: 10px 0;
                  transition: all 0.5s linear;

                  &:hover {

                    >span {
                      color: #409EFF;
                    }
                  }
                }

              font-size: 16px;
              span {
                  padding: 0 10px;
                  cursor: pointer;
                  display: inline;
              }
              span.el-icon-close:hover {
                  cursor: pointer;
              }
          }
          .upload-hint {
            font-size: 20px;
            margin-bottom: 10px;
          }
        }

        .select-orders {

            // padding: 20px 0;

            li {
                padding: 5px 0;
            }
            .order-left {
                float: left;
            }
            .order-right {
                float: right;
            }
        }

    }

    .bind-window {
        .el-form--inline .el-form-item {
            margin-right: 15px;
        }

        td {
            border: 1px solid #e6ebf5;
        }

        td:not(.el-table_1_column_1) {
            width: 120px;
            min-width: 120px;
        }

        .dialog-footer {
            text-align: center;
            button {
                margin-right: 80px;
            }
        }

        a {
            color: #409EFF;
        }

    }
}
</style>
